<template>
  <div class="node-popup" v-if="attributePopup" :style="[nodeInfoStyle]">
    <!-- <div class="header">
      <span>节点属性</span>
      <i class="el-icon-close close-info" @click="closeAttribute"></i>
    </div> -->
    <div class="node-container">
      <div class="info-container">
        <div class="info-item-name">节点编号：</div>
        <div class="info-item-label">
          <span>{{ nodeinfo.nodeNumber }}</span>
        </div>
      </div>
      <div class="info-container">
        <div class="info-item-name">速度：</div>
        <div class="info-item-label">
          <span>{{ nodeinfo.speed }}</span>
          <div class="item-unit">米/秒</div>
        </div>
      </div>
      <div class="info-container">
        <div class="info-item-name">节点高度：</div>
        <div class="info-item-label">
          <span>{{ nodeinfo.flightHs }}</span>
          <div class="item-unit">米</div>
        </div>
      </div>
      <div class="info-container">
        <div class="info-item-name">悬停时间：</div>
        <div class="info-item-label">
          <span>{{ nodeinfo.hoveringtime }}</span>
          <div class="item-unit">秒</div>
        </div>
      </div>
      <div class="info-container">
        <div class="info-item-name">偏航角：</div>
        <div class="info-item-label">
          <span>{{ nodeCamera.heading }}</span>
          <!-- <div class="item-unit">°</div> -->
        </div>
      </div>
      <div class="info-container">
        <div class="info-item-name">俯仰角：</div>
        <div class="info-item-label">
          <span>{{ nodeCamera.pitch }}</span>
          <!-- <div class="item-unit">°</div> -->
        </div>
      </div>
      <!-- <div class="info-container">
        <div class="info-item-name">翻滚角：</div>
        <div class="info-item-label">
          <span>{{ nodeCamera.roll }}</span>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import { EventBus } from '../../common/EventBus'

export default {
  props: {
    nodeInfoStyle: {
      type: [Object, Array],
      default: () => ({ background: ' #000000d3' })
    }
  },
  data() {
    return {
      attributePopup: false,
      nodeinfo: {},
      nodeCamera: {}
    }
  },
  computed: {},
  watch: {
    attributePopup: {
      handler(newVal) {
        if (!newVal) {
          this.nodeinfo = {}
          this.nodeCamera = {}
        }
      }
    }
  },
  mounted() {
    this.initNode()
  },
  methods: {
    initNode() {
      EventBus.$on('changeAttributePopup', (checked) => {
        this.attributePopup = checked
      })
      EventBus.$on('changeNodeinfo', (data) => {
        this.nodeinfo = {}
        if (data) {
          this.nodeinfo = {
            flightHs: data.height.toFixed(4),
            hoveringtime: data.duration,
            speed: data.speed,
            // postures: data.views,
            nodeNumber: data.nodeNumber
          }
        }
      })

      EventBus.$on('changeNodeCamera', (data) => {
        this.nodeCamera = {}
        if (data) {
          const heading = this.normalizeHeading(Number(data.heading))
          const pitch = Number(data.pitch)
          const roll = Cesium.Math.toRadians(data.roll)
          this.nodeCamera = {
            heading: heading.toFixed(2),
            pitch: pitch.toFixed(2),
            roll: roll.toFixed(2)
          }
        } else {
          const camera = window.Viewer.camera
          const heading = this.normalizeHeading(Cesium.Math.toRadians(camera.heading))
          const roll = Cesium.Math.toRadians(camera.roll)
          this.nodeCamera = {
            heading: heading.toFixed(2),
            pitch: -85,
            roll: roll.toFixed(2)
          }
        }
      })
    },
    closeAttribute() {
      this.attributePopup = false
    },
    normalizeHeading(heading) {
      while (heading < -180) {
        heading += 360
      }
      while (heading > 180) {
        heading -= 360
      }
      return heading
    }
  },
  beforeDestroy() {
    EventBus.$off('changeAttributePopup')
    EventBus.$off('changeNodeinfo')
    EventBus.$off('changeNodeCamera')
  }
}
</script>

<style  scoped lang="scss">
.node-popup {
  position: fixed;
  right: 20px;
  top: 10px;
  padding: 5px 8px;
  color: #dedede;
  font-size: 15px;
  border: solid #0e60af 1px;
  border-radius: 3px;
  box-sizing: border-box;
}
.close-info {
  cursor: pointer;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.info-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 5px 0;
}
.info-item-name {
  width: 80px;
}

.info-item-label {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-width: 120px;
  height: 24px;
  border-radius: 4px;
  padding: 2px 4px;
  box-sizing: border-box;
  // background-color: #c2bdbd61;
}
.info-item-label-1 {
  min-width: 120px;
}
.item-unit {
  margin-left: 5px;
}
.info-container-1 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 5px 0;
}
.ndoe-collapse-text {
  display: flex;
  justify-content: space-between;
  margin: 5px 0;
}
.text-disabled {
  max-width: 100px;
  min-width: 80px;
  background: #c2bdbd61;
  border-radius: 2px;
  padding: 0 4px;
  box-sizing: border-box;
  /* cursor: not-allowed; */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
::v-deep {
  .el-collapse {
    border-top: 0px solid #ebeef5;
    border-bottom: 0px solid #ebeef5;
  }
  .el-collapse-item__header {
    display: flex;
    align-items: center;
    height: 28px;
    line-height: 28px;
    background-color: #10576785;
    color: #fff;
    cursor: pointer;
    border: none;
    font-size: 13px;
    font-weight: 500;
    padding: 0 0 0 10px;
  }
  .el-collapse-item__wrap {
    padding: 0 5px;
    will-change: height;
    background-color: #10576738;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 0px solid #fff;
  }
  .el-collapse-item__content {
    padding-bottom: 5px;
    font-size: 13px;
    color: #fff;
    line-height: 1.769230769230769;
  }
}
</style>